<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
        <link rel="shortcut icon" type="image/png" href="../img/favicon.png">
        <title></title>

        

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel="stylesheet" href="../css/main.css">
        <link rel="stylesheet" href="../css/jsplumb-doc.css">

    </head>
    <body>
        <div class="navbar navbar-top navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="/"><img src="../../img/logo-medium-jsplumb.png"></a>
            <div class="community"></div>

        </div>

        <div class="navbar-collapse collapse nav-wrapper">
            <ul class="nav navbar-nav">
                <li><a href="../">DEMOS</a></li>
                <li><a href="../doc/home.html">DOCS</a></li>
                <li><a href="../apidocs/index.html">API</a></li>
                <li><a href="../download">DOWNLOAD</a></li>
                <li><a href="http://beta.jsplumbtoolkit.com/contact.html">CONTACT</a></li>
                <li><a href="https://blog.jsplumbtoolkit.com">BLOG</a></li>

            </ul>

            <div class="social-nav hidden-xs">
                <a href="http://twitter.com/jsplumblib" class="link"><span class="icon-twitter"></span></a>
                <a href="http://github.com/sporritt/jsplumb/" class="link"><span class="icon-github"></span></a>
                <a href="http://www.linkedin.com/company/jsplumb" class="link"><span class="icon-linkedin"></span></a>

            </div>
        </div><!--/.nav-collapse -->
    </div>
</div>

        <div class="container padding-top">
            <div class="row" id="docs">
                <div class="docs-nav col-xs-3" tabindex="0">
                    <ul>
<li><a href="changelog.html">Changelog</a></li>
<li>Required imports and basic setup<ul>
<li><a href="home.html#browser">Browser Compatibility</a></li>
<li><a href="home.html#setup">Setup</a></li>
<li><a href="home.html#doctype">Doctype</a></li>
<li><a href="home.html#imports">Required Imports</a></li>
<li><a href="home.html#initializing">Initializing jsPlumb</a></li>
<li><a href="home.html#multiple">Multiple jsPlumb Instances</a></li>
<li><a href="home.html#zindex">Z-Index Considerations</a></li>
<li><a href="home.html#container">Where does jsPlumb add elements?</a></li>
<li><a href="home.html#dragging">Element Dragging</a></li>
<li><a href="home.html#performance">Performance</a></li>
<li><a href="zooming.html">Zooming</a></li>
</ul>
</li>
<li><a href="defaults.html">Configuring Defaults</a></li>
<li><a href="basic-concepts.html">Basic Concepts</a><ul>
<li><a href="anchors.html">Anchors</a></li>
<li><a href="connectors.html">Connectors</a></li>
<li><a href="endpoints.html">Endpoints</a></li>
<li><a href="overlays.html">Overlays</a></li>
</ul>
</li>
<li><a href="connections.html">Establishing Connections</a><ul>
<li><a href="connections.html#programmatic">Programmatic Connections</a></li>
<li><a href="connections.html#common">Reusing Common Settings</a></li>
<li><a href="connections.html#detaching">Detaching Programmatic Connections</a></li>
<li><a href="connections.html#draganddrop">Drag and Drop Connections</a></li>
<li><a href="connections.html#sourcesandtargets">Elements as sources &amp; targets</a></li>
<li><a href="connections.html#maketarget">Element Targets</a></li>
<li><a href="connections.html#makesource">Element Sources</a></li>
<li><a href="connections.html#sourcefilter">Specifying drag source area</a></li>
</ul>
</li>
<li><a href="removing.html">Removing Connections/Endpoints</a></li>
<li><a href="parameters.html">Connection &amp; Endpoint Parameters</a></li>
<li><a href="types.html">Connection &amp; Endpoint Types</a></li>
<li><a href="events.html">Events</a><ul>
<li><a href="interceptors.html">Interceptors</a></li>
</ul>
</li>
<li>Appearance<ul>
<li><a href="paint-styles.html">Styling via Paint Styles</a></li>
<li><a href="styling-via-css.html">Styling via CSS</a></li>
</ul>
</li>
<li><a href="querying.html">Querying jsPlumb</a></li>
<li><a href="animation.html">Animation</a></li>
<li><a href="utilities.html">Utility Functions</a></li>
<li><a href="loader-support.html">Loader Support (RequireJS)</a></li>
<li>Examples<ul>
<li><a href="connect-examples.html">jsPlumb.connect</a></li>
<li><a href="draggable-connections-examples.html">Draggable Connections</a></li>
<li><a href="miscellaneous-examples.html">Miscellaneous</a></li>
</ul>
</li>
<li>Development<ul>
<li><a href="development.html">Which files are which?</a></li>
<li><a href="Build.html">Building jsPlumb</a></li>
<li><a href="development-documentation.html">Documentation while developing</a></li>
</ul>
</li>
</ul>
                </div>
                <div class="markdown-body col-xs-9">
                    <h2>Overlays</h2>

<p>Overlays are UI elements that are painted onto Connections, such as Labels or Arrows.</p>

<ol>
<li><a href="#intro">Introduction</a></li>
<li> <a href="#location">Overlay Location</a></li>
<li><a href="#adding">Adding Overlays</a></li>
<li><a href="#types">Overlay Types</a>

<ul>
<li><a href="#type-arrow">Arrow</a></li>
<li><a href="#type-plain-arrow">Plain Arrow</a></li>
<li><a href="#type-diamond">Diamond</a></li>
<li><a href="#type-label">Label</a></li>
<li><a href="#type-custom">Custom</a></li>
</ul></li>
<li><a href="#visibility">Hiding/Showing Overlays</a></li>
<li><a href="#removing">Removing Overlays</a></li>
</ol>

<p><a name="intro"></a></p>

<h3>Introduction</h3>

<p>jsPlumb comes with five types of Overlays:</p>

<ul>
<li><strong>Arrow</strong> - a configurable arrow that is painted at some point along the connector.  You can control the length and width of the Arrow, the &#39;foldback&#39; point - a point the tail points fold back into, and the direction (allowed values are 1 and -1; 1 is the default and means point in the direction of the connection)</li>
<li><strong>Label</strong> - a configurable label that is painted at some point along the connector.</li>
<li><strong>PlainArrow</strong> - an Arrow shaped as a triangle, with no foldback.</li>
<li><strong>Diamond</strong> - as the name suggests...a diamond.</li>
<li><strong>Custom</strong> - allows you to create the Overlay yourself - your Overlay may be any DOM element you like.</li>
</ul>

<p><code>PlainArrow</code> and <code>Diamond</code> are actually just configured instances of the generic <code>Arrow</code> overlay (see examples). </p>

<p><a name="location"></a></p>

<h3>Overlay Location</h3>

<p>A key concept with Overlays is that of their <strong>location</strong>.  </p>

<p>For a Connector, the location of an Overlay refers to some point along the path inscribed by the Connector. It can be specified in one of three ways: </p>

<ul>
<li>as a decimal in the range [0..1], which indicates some proportional amount of travel along the path inscribed by the Connector. The default value of 0.5 is in this form, and it means the default location of an Overlay on a Connector is a point halfway along the path.</li>
<li>as an integer greater than 1, which indicates some absolute number of pixels to travel along the Connector from the start point</li>
<li>as an integer less than zero, which indicates some absolute number of pixels to travel backwards along the Connector from the end point.</li>
</ul>

<p>For an Endpoint, the same principles apply, but location is specified as an [x,y] array. For instance, this would specify an Overlay that was positioned in the center of an Endpoint:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">location:[ 0.5, 0.5 ]
</code></pre></div>
<p>Whereas this would specify an Overlay that was positioned 5 pixels along the x axis from the top left corner:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">location: [ 5, 0 ]
</code></pre></div>
<p>And this would specify an Overlay that was positioned 5 pixels along the x axis from the bottom right corner:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">location: [ -5, 0 ]
</code></pre></div>
<p>All Overlays support these two methods for getting/setting their location:</p>

<ul>
<li><strong>getLocation</strong> - returns the current location</li>
<li><strong>setLocation</strong> - sets the current location. For Endpoints, location is expressed in terms of an [ x, y ] array whose values are either proportional to the width/height of the Endpoint (decimals in the range 0-1 inclusive), or absolute values (decimals greater than 0).</li>
</ul>

<p><a name="adding"></a></p>

<h3>Adding Overlays</h3>

<p>You can specify one or more overlays when making a call to <code>jsPlumb.connect</code>, <code>jsPlumb.addEndpoint</code> or <code>jsPlumb.makeSource</code> (but not <code>jsPlumb.makeTarget</code>: overlays are always derived from what the source of a Connection defines)  The three cases are discussed below:</p>

<h6>Specifying one or more overlays on a jsPlumb.connect call</h6>

<p>In this example we&#39;ll create an Arrow with the default options for an Arrow, and a label with the text &quot;foo&quot;:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">connect</span><span class="p">({</span>
  <span class="p">...</span>
  <span class="nx">overlays</span><span class="o">:</span><span class="p">[</span> 
    <span class="s2">&quot;Arrow&quot;</span><span class="p">,</span> 
      <span class="p">[</span> <span class="s2">&quot;Label&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">label</span><span class="o">:</span><span class="s2">&quot;foo&quot;</span><span class="p">,</span> <span class="nx">location</span><span class="o">:</span><span class="mf">0.25</span><span class="p">,</span> <span class="nx">id</span><span class="o">:</span><span class="s2">&quot;myLabel&quot;</span> <span class="p">}</span> <span class="p">]</span>
    <span class="p">],</span>
  <span class="p">...</span>
<span class="p">});</span>
</code></pre></div>
<p>This connection will have an arrow located halfway along it, and the label &quot;foo&quot; one quarter of the way along.  Notice the <strong>id</strong> parameter; it can be used later if you wish to remove the Overlay or change its visibility (see below).</p>

<p>Another example, this time with an absolute location of 50 pixels from the source:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">connect</span><span class="p">({</span>
  <span class="p">...</span>
  <span class="nx">overlays</span><span class="o">:</span><span class="p">[</span> 
    <span class="s2">&quot;Arrow&quot;</span><span class="p">,</span> 
      <span class="p">[</span> <span class="s2">&quot;Label&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">label</span><span class="o">:</span><span class="s2">&quot;foo&quot;</span><span class="p">,</span> <span class="nx">location</span><span class="o">:</span><span class="mi">50</span><span class="p">,</span> <span class="nx">id</span><span class="o">:</span><span class="s2">&quot;myLabel&quot;</span> <span class="p">}</span> <span class="p">]</span>
    <span class="p">],</span>
    <span class="p">...</span>
<span class="p">});</span>
</code></pre></div>
<h6>Specifying one or more overlays on a jsPlumb.addEndpoint call.</h6>

<p><strong>Note</strong> in this example that we use the parameter <code>connectorOverlays</code> and not <code>overlays</code> as in the last example.  This is because <code>overlays</code> would refer to Endpoint Overlays:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">addEndpoint</span><span class="p">(</span><span class="s2">&quot;someDiv&quot;</span><span class="p">,</span> <span class="p">{</span>
  <span class="p">...</span>
  <span class="nx">overlays</span><span class="o">:</span><span class="p">[</span>
    <span class="p">[</span> <span class="s2">&quot;Label&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">label</span><span class="o">:</span><span class="s2">&quot;foo&quot;</span><span class="p">,</span> <span class="nx">id</span><span class="o">:</span><span class="s2">&quot;label&quot;</span><span class="p">,</span> <span class="nx">location</span><span class="o">:</span><span class="p">[</span><span class="o">-</span><span class="mf">0.5</span><span class="p">,</span> <span class="o">-</span><span class="mf">0.5</span><span class="p">]</span> <span class="p">}</span> <span class="p">]</span>
  <span class="p">],</span>
  <span class="nx">connectorOverlays</span><span class="o">:</span><span class="p">[</span> 
    <span class="p">[</span> <span class="s2">&quot;Arrow&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">width</span><span class="o">:</span><span class="mi">10</span><span class="p">,</span> <span class="nx">length</span><span class="o">:</span><span class="mi">30</span><span class="p">,</span> <span class="nx">location</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span> <span class="nx">id</span><span class="o">:</span><span class="s2">&quot;arrow&quot;</span> <span class="p">}</span> <span class="p">],</span>
    <span class="p">[</span> <span class="s2">&quot;Label&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">label</span><span class="o">:</span><span class="s2">&quot;foo&quot;</span><span class="p">,</span> <span class="nx">id</span><span class="o">:</span><span class="s2">&quot;label&quot;</span> <span class="p">}</span> <span class="p">]</span>
  <span class="p">],</span>
  <span class="p">...</span>
<span class="p">});</span>
</code></pre></div>
<p>This connection will have a 10x30 Arrow located right at the head of the connection, and the label &quot;foo&quot; located at the halfway point. The Endpoint itself also has an overlay, located at [ -0.5 * width, -0.5 * height ] relative to the Endpoint&#39;s top,left corner.</p>

<h6>Specifying one or more overlays on a jsPlumb.makeSource call.</h6>

<p><strong>Note</strong> in this example that we again use the parameter <code>connectorOverlays</code> and not <code>overlays</code>.  The <code>endpoint</code> parameter to <code>jsPlumb.makeSource</code> supports everything you might pass to the second argument of a <code>jsPlumb.addEndpoint</code> call:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">makeSource</span><span class="p">(</span><span class="s2">&quot;someDiv&quot;</span><span class="p">,</span> <span class="p">{</span>
  <span class="p">...</span>
  <span class="nx">endpoint</span><span class="o">:</span><span class="p">{</span>
    <span class="nx">connectorOverlays</span><span class="o">:</span><span class="p">[</span> 
      <span class="p">[</span> <span class="s2">&quot;Arrow&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">width</span><span class="o">:</span><span class="mi">10</span><span class="p">,</span> <span class="nx">length</span><span class="o">:</span><span class="mi">30</span><span class="p">,</span> <span class="nx">location</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span> <span class="nx">id</span><span class="o">:</span><span class="s2">&quot;arrow&quot;</span> <span class="p">}</span> <span class="p">],</span> 
      <span class="p">[</span> <span class="s2">&quot;Label&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">label</span><span class="o">:</span><span class="s2">&quot;foo&quot;</span><span class="p">,</span> <span class="nx">id</span><span class="o">:</span><span class="s2">&quot;label&quot;</span> <span class="p">}</span> <span class="p">]</span>
    <span class="p">]</span>
  <span class="p">}</span>
  <span class="p">...</span>
<span class="p">});</span>
</code></pre></div>
<p>This connection will have a 10x30 Arrow located right at the head of the connection, and the label &quot;foo&quot; located at the halfway point. </p>

<h6>Using the <code>addOverlay</code> method on an Endpoint or Connection</h6>

<p>Endpoints and Connections both have an <code>addOverlay</code> method that takes as an argument a single Overlay definition. An example:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">e</span> <span class="o">=</span> <span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">addEndpoint</span><span class="p">(</span><span class="s2">&quot;someElement&quot;</span><span class="p">);</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">addOverlay</span><span class="p">([</span> <span class="s2">&quot;Arrow&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">width</span><span class="o">:</span><span class="mi">10</span><span class="p">,</span> <span class="nx">height</span><span class="o">:</span><span class="mi">10</span><span class="p">,</span> <span class="nx">id</span><span class="o">:</span><span class="s2">&quot;arrow&quot;</span> <span class="p">}]);</span> 
</code></pre></div>
<p><a name="types"></a></p>

<h3>Overlay Types</h3>

<p><a name="type-arrow"></a></p>

<h6>Arrow</h6>

<p>Draws an arrow, using four points: the head and two tail points, and a <code>foldback</code> point, which permits the tail of the arrow to be indented. Available constructor arguments for this Overlay are:</p>

<ul>
<li><strong>width</strong> - width of the tail of the arrow</li>
<li><strong>length</strong> - distance from the tail of the arrow to the head</li>
<li><strong>location</strong> - where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the Arrow should appear on the Connector</li>
<li><strong>direction</strong> - which way to point. Allowed values are 1 (the default, meaning forwards) and -1, meaning backwards </li>
<li><strong>foldback</strong> - how far along the axis of the arrow the tail points foldback in to. Default is 0.623.</li>
<li><strong>paintStyle</strong> - a style object in the form used for paintStyle values for Endpoints and Connectors. </li>
</ul>

<p><a name="type-plain-arrow"></a></p>

<h6>PlainArrow</h6>

<p>This is just a specialized instance of <code>Arrow</code> in which jsPlumb hardcodes <code>foldback</code> to 1, meaning the tail of the Arrow is a flat edge.  All of the constructor parameters from Arrow apply for PlainArrow.</p>

<p><a name="type-diamond"></a></p>

<h6>Diamond</h6>

<p>This is a specialized instance of <code>Arrow</code> in which jsPlumb hardcodes &#39;foldback&#39; to 2, meaning the Arrow turns into a Diamond.  All of the constructor parameters from Arrow apply for Diamond.</p>

<p><a name="type-label"></a></p>

<h6>Label</h6>

<p>Provides a text label to decorate Connectors with.  The available constructor arguments are:        </p>

<ul>
<li><strong>label</strong> - The text to display.  You can provide a function here instead of plain text: it is passed the Connection as an argument, and it should return a String.</li>
<li><strong>cssClass</strong> - Optional css class to use for the Label.  This is now preferred over using the <code>labelStyle</code> parameter.</li>
<li><strong>labelStyle</strong> - Optional arguments for the label&#39;s appearance.  Valid entries in this JS object are:

<ul>
<li><strong>font</strong> - a font string in a format suitable for the Canvas element</li>
<li><strong>fill</strong> - the color to fill the label&#39;s background with. Optional.</li>
<li><strong>color</strong> - the color of the label&#39;s text. Optional.</li>
<li><strong>padding</strong> - optional padding for the label. This is expressed as a proportion of the width of the label, not in pixels or ems.</li>
<li><strong>borderWidth</strong> - optional width in pixels for the label&#39;s border. Defaults to 0.</li>
<li><strong>borderStyle</strong> - optional. The color to paint the border, if there is one.</li>
</ul></li>
<li><strong>location</strong> - As for Arrow Overlay.  Where, either proportionally from 0 to 1 inclusive, or as an absolute offset from either source or target, the label should appear.</li>
</ul>

<p>The Label overlay offers two methods - <code>getLabel</code> and <code>setLabel</code> - for accessing/manipulating its content dynamically:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">c</span> <span class="o">=</span> <span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">connect</span><span class="p">({</span>
  <span class="nx">source</span><span class="o">:</span><span class="s2">&quot;d1&quot;</span><span class="p">,</span> 
  <span class="nx">target</span><span class="o">:</span><span class="s2">&quot;d2&quot;</span><span class="p">,</span> 
  <span class="nx">overlays</span><span class="o">:</span><span class="p">[</span>
    <span class="p">[</span> <span class="s2">&quot;Label&quot;</span><span class="p">,</span> <span class="p">{</span><span class="nx">label</span><span class="o">:</span><span class="s2">&quot;FOO&quot;</span><span class="p">,</span> <span class="nx">id</span><span class="o">:</span><span class="s2">&quot;label&quot;</span><span class="p">}]</span>
  <span class="p">]</span> 
<span class="p">});</span>

<span class="p">...</span>

<span class="kd">var</span> <span class="nx">label</span> <span class="o">=</span> <span class="nx">c</span><span class="p">.</span><span class="nx">getOverlay</span><span class="p">(</span><span class="s2">&quot;label&quot;</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Label is currently&quot;</span><span class="p">,</span> <span class="nx">label</span><span class="p">.</span><span class="nx">getLabel</span><span class="p">());</span>
<span class="nx">label</span><span class="p">.</span><span class="nx">setLabel</span><span class="p">(</span><span class="s2">&quot;BAR&quot;</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Label is now&quot;</span><span class="p">,</span> <span class="nx">label</span><span class="p">.</span><span class="nx">getLabel</span><span class="p">());</span>
</code></pre></div>
<p>In this example you can see that the Label Overlay is assigned an id of &quot;label&quot; in the connect call, and then retrieved using that id in the call to Connection&#39;s getOverlay method.</p>

<p>Both Connections and Endpoints support Label Overlays, and because changing labels is quite a common operation, <strong>setLabel</strong> and <strong>getLabel</strong> methods have been added to these objects:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">conn</span> <span class="o">=</span> <span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">connect</span><span class="p">({</span>
  <span class="nx">source</span><span class="o">:</span><span class="s2">&quot;d1&quot;</span><span class="p">,</span> 
  <span class="nx">target</span><span class="o">:</span><span class="s2">&quot;d2&quot;</span><span class="p">,</span>
  <span class="nx">label</span><span class="o">:</span><span class="s2">&quot;FOO&quot;</span>
<span class="p">});</span>

<span class="p">...</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Label is currently&quot;</span><span class="p">,</span> <span class="nx">conn</span><span class="p">.</span><span class="nx">getLabel</span><span class="p">());</span>
<span class="nx">conn</span><span class="p">.</span><span class="nx">setLabel</span><span class="p">(</span><span class="s2">&quot;BAR&quot;</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Label is now&quot;</span><span class="p">,</span> <span class="nx">conn</span><span class="p">.</span><span class="nx">getLabel</span><span class="p">());</span>
</code></pre></div>
<p>These methods support passing in a Function instead of a String, and jsPlumb will create a label overlay for you if one does not yet exist when you call setLabel:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">conn</span> <span class="o">=</span> <span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">connect</span><span class="p">({</span>
  <span class="nx">source</span><span class="o">:</span><span class="s2">&quot;d1&quot;</span><span class="p">,</span> 
  <span class="nx">target</span><span class="o">:</span><span class="s2">&quot;d2&quot;</span>
<span class="p">});</span>                 

<span class="p">...</span>

<span class="nx">conn</span><span class="p">.</span><span class="nx">setLabel</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">c</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="nx">s</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">();</span>
  <span class="k">return</span> <span class="nx">s</span><span class="p">.</span><span class="nx">getTime</span><span class="p">()</span> <span class="o">+</span> <span class="s2">&quot;milliseconds have elapsed since 01/01/1970&quot;</span><span class="p">;</span>
<span class="p">});</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Label is now&quot;</span><span class="p">,</span> <span class="nx">conn</span><span class="p">.</span><span class="nx">getLabel</span><span class="p">());</span>
</code></pre></div>
<p><a name="type-custom"></a></p>

<h6>Custom</h6>

<p>The Custom Overlay allows you to create your own Overlays, which jsPlumb will position for you.  You need to implement one method - <code>create(component)</code> - which is passed the component on which the Overlay is located as an argument, and which returns either a DOM element or a valid selector from the underlying library:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">conn</span> <span class="o">=</span> <span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">connect</span><span class="p">({</span>
  <span class="nx">source</span><span class="o">:</span><span class="s2">&quot;d1&quot;</span><span class="p">,</span>
  <span class="nx">target</span><span class="o">:</span><span class="s2">&quot;d2&quot;</span><span class="p">,</span>
  <span class="nx">paintStyle</span><span class="o">:</span><span class="p">{</span>
    <span class="nx">stroke</span><span class="o">:</span><span class="s2">&quot;red&quot;</span><span class="p">,</span>
    <span class="nx">strokeWidth</span><span class="o">:</span><span class="mi">3</span>
  <span class="p">},</span>
  <span class="nx">overlays</span><span class="o">:</span><span class="p">[</span>
    <span class="p">[</span><span class="s2">&quot;Custom&quot;</span><span class="p">,</span> <span class="p">{</span>
      <span class="nx">create</span><span class="o">:</span><span class="kd">function</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;&lt;select id=&#39;myDropDown&#39;&gt;&lt;option value=&#39;foo&#39;&gt;foo&lt;/option&gt;&lt;option value=&#39;bar&#39;&gt;bar&lt;/option&gt;&lt;/select&gt;&quot;</span><span class="p">);</span>                
      <span class="p">},</span>
      <span class="nx">location</span><span class="o">:</span><span class="mf">0.7</span><span class="p">,</span>
      <span class="nx">id</span><span class="o">:</span><span class="s2">&quot;customOverlay&quot;</span>
    <span class="p">}]</span>
  <span class="p">]</span>
<span class="p">});</span>
</code></pre></div>
<p>Here we have created a select box with a couple of values, assigned to it the id of &#39;customOverlay&#39; and placed it at location 0.7. Note that the &#39;id&#39; we assigned is distinct from the element&#39;s id. You can use the id you provided to later retrieve this Overlay using the <code>getOverlay(id)</code> method on a Connection or an Endpoint.</p>

<p><a name="visibility"></a></p>

<h3>Hiding/Showing Overlays</h3>

<p>You can control the visibility of Overlays using the <code>setVisible</code> method of Overlays themselves, or with <code>showOverlay(id)</code> or <code>hideOverlay(id)</code> on a Connection.</p>

<p>Remember the <strong>id</strong> parameter that we specified in the examples above?  This can be used to retrieve the Overlay from a Connection:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">connection</span> <span class="o">=</span> <span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">connect</span><span class="p">({</span>
  <span class="p">...</span>
  <span class="nx">overlays</span><span class="o">:</span><span class="p">[</span> 
    <span class="s2">&quot;Arrow&quot;</span><span class="p">,</span> 
    <span class="p">[</span> <span class="s2">&quot;Label&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">label</span><span class="o">:</span><span class="s2">&quot;foo&quot;</span><span class="p">,</span> <span class="nx">location</span><span class="o">:</span><span class="mf">0.25</span><span class="p">,</span> <span class="nx">id</span><span class="o">:</span><span class="s2">&quot;myLabel&quot;</span> <span class="p">}</span> <span class="p">]</span>
  <span class="p">],</span>
  <span class="p">...</span>
<span class="p">});</span>

<span class="c1">// time passes</span>

<span class="kd">var</span> <span class="nx">overlay</span> <span class="o">=</span> <span class="nx">connection</span><span class="p">.</span><span class="nx">getOverlay</span><span class="p">(</span><span class="s2">&quot;myLabel&quot;</span><span class="p">);</span>
<span class="c1">// now you can hide this Overlay:</span>
<span class="nx">overlay</span><span class="p">.</span><span class="nx">setVisible</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
<span class="c1">// there are also hide/show methods:</span>
<span class="nx">overlay</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
<span class="nx">overlay</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
</code></pre></div>
<p>However, Connection and Endpoint also have two convenience methods you could use instead:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">connection</span> <span class="o">=</span> <span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">connect</span><span class="p">({</span>
  <span class="p">...</span>
  <span class="nx">overlays</span><span class="o">:</span><span class="p">[</span> 
    <span class="s2">&quot;Arrow&quot;</span><span class="p">,</span> 
    <span class="p">[</span> <span class="s2">&quot;Label&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">label</span><span class="o">:</span><span class="s2">&quot;foo&quot;</span><span class="p">,</span> <span class="nx">location</span><span class="o">:-</span><span class="mi">30</span> <span class="p">},</span> <span class="nx">id</span><span class="o">:</span><span class="s2">&quot;myLabel&quot;</span> <span class="p">]</span>
  <span class="p">],</span>
  <span class="p">...</span>
<span class="p">});</span>

<span class="c1">// time passes</span>

<span class="nx">connection</span><span class="p">.</span><span class="nx">hideOverlay</span><span class="p">(</span><span class="s2">&quot;myLabel&quot;</span><span class="p">);</span>

<span class="c1">// more time passes</span>

<span class="nx">connection</span><span class="p">.</span><span class="nx">showOverlay</span><span class="p">(</span><span class="s2">&quot;myLabel&quot;</span><span class="p">);</span>
</code></pre></div>
<p><a name="removing"></a></p>

<h3>Removing Overlays</h3>

<p>Connection and Endpoint also have a <code>removeOverlay</code> method, that does what you might expect:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">connection</span> <span class="o">=</span> <span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">connect</span><span class="p">({</span>
  <span class="p">...</span>
  <span class="nx">overlays</span><span class="o">:</span><span class="p">[</span> 
    <span class="s2">&quot;Arrow&quot;</span><span class="p">,</span> 
    <span class="p">[</span> <span class="s2">&quot;Label&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">label</span><span class="o">:</span><span class="s2">&quot;foo&quot;</span><span class="p">,</span> <span class="nx">location</span><span class="o">:</span><span class="mf">0.25</span> <span class="p">},</span> <span class="nx">id</span><span class="o">:</span><span class="s2">&quot;myLabel&quot;</span> <span class="p">]</span>
  <span class="p">],</span>
  <span class="p">...</span>
<span class="p">});</span>     

<span class="c1">// time passes</span>

<span class="nx">connection</span><span class="p">.</span><span class="nx">removeOverlay</span><span class="p">(</span><span class="s2">&quot;myLabel&quot;</span><span class="p">);</span>
</code></pre></div>
                </div>
            </div>
        </div>

        <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-49979015-1', 'auto');
    ga('send', 'pageview');

</script>


    </body>
</html>
